<template>
  <div class="dynamic-menu">
    <!-- 开发测试菜单组 -->
    <a-sub-menu key="dev-test2">
      <template #icon>
        <experiment-outlined />
      </template>
      <template #title>妙码测试</template>

      <!-- 动态生成的菜单项 -->
      <a-menu-item
        v-for="menuItem in dynamicMenuItems"
        :key="menuItem.name"
      >
        <template #icon>
          <component :is="getIconComponent(menuItem.meta?.icon)" />
        </template>
        <router-link :to="`/${menuItem.path}`">
          {{ menuItem.meta?.title || menuItem.name }}
        </router-link>
      </a-menu-item>


    </a-sub-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import {
  ExperimentOutlined,
} from '@ant-design/icons-vue'
import { discoverModules, type ModuleRoute } from '@/miaoma/moduleDiscovery'

const dynamicMenuItems = ref<ModuleRoute[]>([])

// 图标组件映射 - 直接导入，避免异步问题
const iconMap: Record<string, any> = {
  'experiment-outlined': ExperimentOutlined,
}

/**
 * 获取图标组件
 */
function getIconComponent(iconName?: string) {
  if (!iconName || !iconMap[iconName]) {
    return ExperimentOutlined // 默认使用测试药瓶图标
  }
  return iconMap[iconName]
}

/**
 * 加载动态菜单
 */
async function loadDynamicMenu() {
  try {
    const modules = await discoverModules()

    // 只显示 showInDynamicMenu: true 的模块
    const visibleModules = modules.filter(module => module.showInDynamicMenu)

    // 提取所有菜单项
    const allMenuItems: ModuleRoute[] = []
    visibleModules.forEach(module => {
      allMenuItems.push(...module.menuItems)
    })

    dynamicMenuItems.value = allMenuItems

    // console.debug('已发现的模块:', modules.map(m => ({
    //   name: m.moduleName,
    //   showInDynamicMenu: m.showInDynamicMenu
    // })))
    // console.debug('显示的菜单项:', allMenuItems)
  } catch (error) {
    console.error('加载动态菜单失败:', error)
  }
}

onMounted(() => {
  loadDynamicMenu()
})
</script>

